<template>
  <view class="pending_contain">
    <headerSearch :query="query" @quryList="quryList" @search="search"></headerSearch>
    <scroll-view :scroll-y="true" class="search_list_2" @scrolltolower="handleScroll" v-if="showList.length>0">
      <template v-for="(item, index) in showList">
        <record-list-item :item="item" class="item" />
      </template>
    </scroll-view>
    <view class="container_empty" v-else>
      <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
      <view class="empty_text">暂无支付信息</view>
    </view>


  </view>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { OrderListType } from "@/pages/orderTracking/listType";
// import { WorkerOrderOrderListParam, getByCustomer } from "@/@api/home";
import {getOrderTrackingList, orderList} from "@/@api/orderTracking";
import { IconFont } from '@nutui/icons-vue-taro';
import recordListItem from "./recordListItem.vue";
import priceDetails from './priceDetails.vue'
import useUserStore from "@/store/user";
import useUserInfoStore from "../../store/user";
import useMyOrderStore from "@/store/myOrder";
import headerSearch from './headerSearchPending.vue'
import Taro,{ useDidShow } from "@tarojs/taro";
import {$post} from "@/@api";
const userStore = useUserInfoStore()
const order = useMyOrderStore()
const props = defineProps<{
  tabValue: string;
}>();
const show = ref<boolean>(false);//费用明细
//搜索参数
const searchValue = ref<string>("");
const store = useUserStore();
const loading = ref(false);
const formList = ref<OrderListType[]>([]);

const params = ref({
  pageNum: 1,
  pageSize: 10,
});

const query = ref({
  keywords: "",
  clearingForm: "",
  start: "",
  end: "",
});

const handleScroll = ()=> {
  if (!loading.value) {
    loading.value = true;
    onLoadList();
  }
}

function quryList(item) {
  query.value.start = item.start;
  query.value.end = item.end;
  query.value.clearingForm = item.clearingForm;
  formList.value = []
  params.value = {
    pageNum: 1,
    pageSize: 10,
  };
  initList();
}
//搜索
function search(keywords: string) {
  console.log(keywords, 'keywords');

  query.value.keywords = keywords;
  params.value = {
    pageNum: 1,
    pageSize: 10,
  };
  formList.value = []
  initList();
}


// 初始化列表
async function initList() {
  let postData:any = {
    customerCode: userStore.userInfo.customerCode,
    clearingForm: query.value.clearingForm,
    startBillingTime: query.value.start,
    endBillingTime: query.value.end,
    keywords: query.value.keywords,
    flag: '4',
    wxStatus: '2',
  }
  const res: any = await $post(`/selfmachine-system/workerIndex/listNew?pageNum=${params.value.pageNum}&pageSize=${params.value.pageSize}`, postData);

  if (res.data.code == 200) {
    formList.value = setStatusVal([...formList.value, ...res.data.rows]);
    loading.value = false;

    // 数据全部加载完成
    if (formList.value.length >= res.data.total) {
      loading.value = true;
    }
  }
}

// 懒加载
async function onLoadList() {
  loading.value = true;
  params.value.pageNum++;
  initList();
}
// 添加状态标签
function setStatusVal(obj: OrderListType[]): OrderListType[] {
  let arr = obj.map((item: OrderListType) => {
    let str = ""; //statusFilter(item.wxStatus, item.status, item.isExamine, item.billNo)

    if (item.wxStatus == 1) {
      str = "待审核";
    } else if (item.wxStatus == 2) {
      str = "待支付";
    } else if (item.wxStatus == 3) {
      str = "未发货";
    } else if (item.wxStatus == 4) {
      str = "运输中";
    } else if (item.wxStatus == 5) {
      str = "待签收";
    } else if (item.wxStatus == 6) {
      str = "已完成";
    } else {
      str = statusFilter(
          item.wxStatus,
          item.status,
          item.isExamine,
          item.billNo
      );
    }

    return {
      ...item,
      statusVal: str,
      checked: false,
    };
  });
  return arr;
}
// 状态标签判断
function statusFilter(
    wxStatus: number,
    status: number,
    isExamine: number,
    billNo: string
) {
  if (isExamine == 1 && wxStatus != 1 && billNo) {
    return "待审核";
  } else if (wxStatus == 2) {
    if ([4, 5, 6, 7].includes(status)) {
      return "待签收";
    } else {
      return "待支付";
    }
  } else if (wxStatus == 3) {
    return "未发货";
  } else if (wxStatus == 4) {
    return "运输中";
  } else if (wxStatus == 5) {
    return "待签收";
  } else if (wxStatus == 6) {
    return "已完成";
  } else {
    return "其他";
  }
}
// 筛选其他数据
const showList = computed(() => {
  return formList.value;
});

// tab改变
const init = ()=>{
  // 初始化
  params.value = {
    pageNum: 1,
    pageSize: 10,
  };
  // query.value = {
  //   keywords: "",
  //   clearingForm: "",
  //   start: "",
  //   end: "",
  // }
  formList.value = [];
  initList();
}

watch(()=>props.tabValue,(newVal)=>{
  init()
},{immediate: true})
</script>

<style lang="scss">
page {
  --nut-tabs-horizontal-tab-line-color: #0966ff;
  --nut-tabs-titles-item-active-color: #0966ff;
}
.pending_contain {
  width: 100vw;
  height: calc(100% - 92rpx);
  overflow-y: hidden;

  .nut-tab-pane {
    padding: 0;
  }

  .search_list_2 {
    // height: 50rpx !important;
    overflow: auto;
    padding: 0 24rpx 24rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    height: calc(100vh - 200rpx);

    .item {
      width: 700rpx;
      height: 436rpx;
      background-color: #fff;
      margin-top: 24rpx;
      border-radius: 10rpx;
      // padding-top: 20rpx;
    }
  }
}
.telbox {
  width: 100%;
  margin-top: 72rpx;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 0 24rpx;
  box-sizing: border-box;
  .telrow {
    width: 100%;
    border-top: 1rpx solid #f0f0f0;
    text-align: center;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #999;
    &.active {
      font-size: 32rpx;
      color: #3091ff;
    }
  }
}

.container_empty {
  margin-top: 280rpx;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }
}

</style>
